<template>
    <el-dialog v-model="boxVisible" width="50%" title="巡检设置">
      <p style="color: #FFFFFF">点击添加：</p>
        <el-row :gutter="20">
            <el-col v-for="(item,index) in setLocationList" :span="3" :key="index" @click="addItem(item)">
                <div class="location-box">{{ item.presetName }}</div>
            </el-col>
        </el-row>
        <div class="addtag-div">
            <div class="title">
                <span>已添加点：</span>
            </div>
            <div style="flex: 1">
                <el-tag style="margin:0 10px 10px 0" v-for="(i,index) in pamersList" :key="index" closable
                        @close="delterTag(i,index)">{{ i.presetName }}
                </el-tag>
            </div>
        </div>
        <div class="addtag-div">
            <div class="title">
                <span>巡航速度：</span>
            </div>
            <div style="flex: 1;display: flex;align-items: center">
                <el-slider @change="speedHandle" style="width: 50%" v-model="speedValue" :min="1" :max="100"/>
                <span style="margin-left: 20px;color: #FFFFFF">{{ speedValue }}</span>
            </div>
        </div>
        <div class="addtag-div">
            <div class="title">
                <span>停留时间：</span>
            </div>
            <div style="flex: 1">
                <el-input-number v-model="remainTime" :step="1" :min="1" :max="3600"/>
            </div>
        </div>

        <template v-slot:footer>
            <el-button @click="close()">{{ $t("cancel") }}</el-button>
            <el-button type="primary" @click="confirmHandle()">{{ $t("confirm") }}</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts">
import useView from "@/hooks/useView";
import {IObject} from "@/types/interface";
import baseService from "@/service/baseService";
import {defineComponent, reactive, toRefs} from "vue";
import {getToken} from "@/utils/cache";
import app from "@/constants/app";
import axios from "axios";
import {useAppStore} from "@/store";

export default defineComponent({
    setup() {
        const state = reactive({
            useAppStore,
            boxVisible: false,
            setLocationList: [],
            pamersList: [] as any,
            speedValue: 10,
            remainTime: 10,
            cameraData: {}
        });
        return {...useView(state), ...toRefs(state)};
    },
    computed: {
        dataRule(): IObject {
            return {
                handleContent: [{required: true, message: this.$t("validate.required"), trigger: "blur"}]
            };
        }
    },
    methods: {
        init(data: any, cameraData: any) {
            this.boxVisible = true;
            this.$nextTick(() => {
                this.setLocationList = data;
                this.cameraData = cameraData;
            });
        },
        // 获取表单详情信息
        getInfo(id: string) {
            baseService.get(`/KxWarningPic/kxwarningpic/${id}`).then((res) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg);
                }
                this.pamersList = res.data;
            });
        },
        addItem(data: Object) {
            console.log(data)
          axios.get(`${app.httpgb}/api/front-end/cruise/point/add/${this.cameraData.gbDeviceNo}/${this.cameraData.gbChannelNo}`, {
                params: {
                    cruiseId: 1,
                    presetId: data.presetId
                },
                headers: {
                    'access-Token': this.useAppStore().state.accessToken
                }
            }).then((res) => {
                if (res.data.code === 0) {
                    // this.getLocationList();
                    this.pamersList.push(data);
                    return this.$message.success("添加成功！");
                }
            }).catch((error) => {
                return this.$message.error(error.data.msg);
            });
        },
        delterTag(data: object, index: number | string) {
          axios.get(`${app.httpgb}/api/front-end/cruise/point/delete/${this.cameraData.gbDeviceNo}/${this.cameraData.gbChannelNo}`, {
                params: {
                    cruiseId: 1,
                    presetId: data.presetId
                },
                headers: {
                    'access-Token': this.useAppStore().state.accessToken
                }
            }).then((res) => {
                if (res.data.code === 0) {
                    this.pamersList.splice(index, 1)
                    return this.$message.success("删除成功！");
                }
            }).catch((error) => {
                return this.$message.error(error.data.msg);
            });
        },
        speedHandle() {
          axios.get(`${app.httpgb}/api/front-end/cruise/speed/${this.cameraData.gbDeviceNo}/${this.cameraData.gbChannelNo}`, {
                params: {
                    cruiseId: 1,
                    speed: this.speedValue
                },
                headers: {
                    'access-Token': this.useAppStore().state.accessToken
                }
            }).then((res) => {
                if (res.data.code === 0) {
                    return this.$message.success("设置成功！");
                }
            }).catch((error) => {
                return this.$message.error(error.data.msg);
            });
        },
        confirmHandle() {
          axios.get(`${app.httpgb}/api/front-end/cruise/time/${this.cameraData.gbDeviceNo}/${this.cameraData.gbChannelNo}`, {
                params: {
                    cruiseId: 1,
                    time: this.remainTime
                },
                headers: {
                    'access-Token': this.useAppStore().state.accessToken
                }
            }).then((res) => {
                if (res.data.code === 0) {
                    this.boxVisible = true;
                  this.$message.success("设置成功！");
                  this.close();
                }
            }).catch((error) => {
                return this.$message.error(error.data.msg);
            });

        },
        close() {
            this.boxVisible = false;
        },
        // 图片路径拼接
        imgUrl(url: string) {
            return `${app.api}/KxWarningPic/kxwarningpic/getImage?token=${getToken()}&filePath=` + url;
        },
        liveUrl(url: string) {
            return app.httpgb + "/videoRecord" + url;
        }

    }
});
</script>

<style lang="scss" scoped>
.el-card {
  background-color: rgb(5, 20, 39);
  color: rgb(252, 252, 252);
}

.location-box {
  border: 1px solid #FFF118;
  color: #17b4d7;
  text-align: center;
  padding: 10px;
  font-weight: 500;
}

.item-text {
  color: #FFFFFF;
}

.addtag-div {
  margin-top: 20px;
  display: flex;
  align-items: center;

  .title {
    color: #FFFFFF;
    font-weight: 500;
  }
}

.title-p {
  border-left: 4px solid #ffff00;
  padding-left: 10px;
  font-size: 16px;
  color: rgb(23, 180, 215);
  font-weight: 560;
}

.imgbox {
  width: 100%;
  height: 300px;
}

.flow-imgs-p {
  margin-right: 10px;
  width: 80px;
  height: 70px;
}
</style>
